import { defineComponent, ref } from 'vue'
import './DataOverview.css'

export default defineComponent({
  name: 'DataOverview',
  setup() {
    const dataItems = ref([
      {
        label: '现有确诊',
        value: 8234,
        increment: '+156',
        color: '#ff4d4f',
        icon: '⚠️'
      },
      {
        label: '累计确诊',
        value: 102345,
        increment: '+234',
        color: '#faad14',
        icon: '📊'
      },
      {
        label: '累计治愈',
        value: 89876,
        increment: '+187',
        color: '#52c41a',
        icon: '✅'
      },
      {
        label: '累计死亡',
        value: 4635,
        increment: '+5',
        color: '#8c8c8c',
        icon: '💔'
      }
    ])

    return () => (
      <div class="data-overview">
        {dataItems.value.map((item, index) => (
          <div
            key={index}
            class="data-overview__card"
            style={`--card-color: ${item.color}`}
          >
            <div class="data-overview__icon">{item.icon}</div>
            <div class="data-overview__content">
              <div class="data-overview__label">{item.label}</div>
              <div class="data-overview__value">
                {item.value.toLocaleString()}
              </div>
              <div class="data-overview__increment">{item.increment}</div>
            </div>
            <div class="data-overview__glow"></div>
          </div>
        ))}
      </div>
    )
  }
})
